<template>

    <el-card class="box-card3">
        <template #header>
            <div class="system-user-search mb15">
                <el-text class="mx-1 titel " size="large">用户管理</el-text>
                <el-input size="default" placeholder="请输入用户名称" style="max-width: 180px" v-model="stats.param.search"> </el-input>
                <el-button size="default" type="primary" class="ml10" @click="gettabledata">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenAddUser('add')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增用户
                </el-button>
            </div>
        </template>
        <el-table :data="stats.tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" width="60"  />
            <el-table-column prop="id" label="ID"  />
            <el-table-column prop="name" label="用户名" />
            <el-table-column prop="nicename" label="昵称" />
            <el-table-column prop="role" label="角色" >
            <template #default="scope">
                <div v-if="scope.row.role==='admin'"><el-icon ><Avatar/></el-icon>管理员</div>
                <div v-if="scope.row.role==='common'"><el-icon ><UserFilled/></el-icon>普通账户</div>
            </template>
            </el-table-column>
            <el-table-column prop="create" label="创建时间" :formatter="formatDate"/>
            <el-table-column prop="lastlogin" label="最后登录时间" :formatter="formatDate"/>
            <el-table-column prop="enable" label="用户状态" show-overflow-tooltip>
                <template #default="scope">
                    <el-tag type="success" v-if="scope.row.status">启用</el-tag>
                    <el-tag type="info" v-else>禁用</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="220">
                <template #default="scope">
                    <el-button size="small" type="success" @click="handleEdit('edit', scope.row)">编辑</el-button>
                    <el-button size="small" type="success" @click="resetpassword(scope.$index, scope.row)" >重置密码</el-button>
                    <el-button size="small" type="danger"  @click="handleDelete(scope.$index, scope.row)" >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-config-provider :locale="zhCn">
        <el-pagination style="margin-top: 25px;"
            @current-change="onHandleCurrentChange"
            :pager-count="5"
            v-model:current-page="stats.param.pageindex"
            background
            v-model:page-size="stats.param.pagesize"
            layout="total, prev, pager, next, jumper"
            :total="stats.total"
        >
        </el-pagination>
        </el-config-provider>
    </el-card>
    <UserDialog ref="userDialogRef" @refresh="gettabledata()"/>


</template>

<script lang="ts" setup>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import {defineAsyncComponent, onMounted, reactive, ref} from "vue";
import { userlist,userdel,resetpass } from "@/api/api.js"
import { formatDate } from "@/api/tool.js"
const UserDialog = defineAsyncComponent(() => import('@/views/User/dialog.vue'));
import { ElMessageBox, ElMessage } from 'element-plus';
// 定义变量内容
const userDialogRef = ref();
interface User {
    date: string
    name: string
    address: string
}

const handleEdit = (type: string, row) => {
    userDialogRef.value.openDialog(type, row);
};



const resetpassword = (index: number, row: User) => {
  ElMessageBox.confirm(`是否确定要重置[“${row.nicename}”]密码?`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
      .then(async () => {
        let res = await resetpass({"ID":row.id})
        gettabledata();
        ElMessage.success('重置成功,初始密码[123456]');
      })
      .catch(() => {});
}



const handleDelete = (index: number, row: User) => {
    ElMessageBox.confirm(`此操作将永久删除账户：“${row.nicename}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            let res = await userdel({"ID":row.id})
            gettabledata();
            ElMessage.success('删除成功');
        })
        .catch(() => {});
}


const stats =reactive({
        tableData:[],
        total:0,
        param: {
            pageindex: 1,
            pagesize: 10,
            search:'',
        },
    })


const onOpenAddUser = (type: string) => {
    userDialogRef.value.openDialog(type);
};

const onHandleCurrentChange = (val: number) => {
    stats.param.pageindex = val;
    gettabledata();
};

const gettabledata= async()=>{
    let res =await userlist(stats.param)
    stats.tableData=res.data
    stats.total=res.total
}

onMounted(() => {
    gettabledata()
});
</script>
<style>
.titel{
    font-size: 26px;
    margin-right: 26px;
}
</style>